
<template>
  <el-select v-model="clientKeyId" size="small" style="width:100%" filterable clearable @change="returnChange" :placeholder="clientName" >
    <el-option 
      v-for="item in clientList" 
      :key="item.cId" 
      :label="item.cName+'|'+item.erpJingbanren.jbrName+'|'+item.sysDictData.dictLabel" 
      :value="item.cId">
    </el-option>
  </el-select>
</template>

<script>
import { listClient } from "@/api/erp/system/client";

export default {
  data() {
    return {
      clientList : [],
      clientKeyId : '',
    };
  },
  model:{
    prop:'clientId',
    event: 'change'
  },
  watch:{
    clientId : function(newValue, oldValue){
      this.clientKeyId = newValue;
    }
  },
  props: {
    clientId: 0,
    clientName: ''
  },
  methods: {
    returnChange(){
      this.$emit('change', this.clientKeyId);
    },
  },
  created() {
      listClient().then((response) => {
          this.clientList = response.rows;
      });
  },
};
</script>
